<template>
  <div class="copyNot">
    <audio
      id="ancyaudio"
      preload="auto"
      @error="ancyPlayAudioError"
      @ended="ancyPlayAudioEnd"
      @onPlayTimeChange="ancyOnPlayTimeChange"
      :curPlayTime="ancyaudioPlayTime"
      class="c-pf c-p-l-100"
    ></audio>
    <audio
      id="audio"
      preload="auto"
      @error="playAudioError"
      @ended="playAudioEnd"
      @onPlayTimeChange="onPlayTimeChange"
      :curPlayTime="audioPlayTime"
      class="c-pf c-p-l-100"
    ></audio>
    <audio id="audioSelf" @ended="playAudioSelfEnd" class="c-pf c-p-l-100"></audio>
    <div v-if="questionInfo!=null">
      <div class="c-pv30 c-c-textAlign-c c-flex-row c-justify-center c-fc-gray c-fs28">
        <span>{{curNum}}/{{allNumber}}</span>
      </div>
      <!-- 从练习中抽取题目，有可能练习中该题后面被删除了 -->
      <section v-if="questionInfo.type" class="c-pb100">
        <div class="c-fs-36 c-fw-b c-pv10 c-ph32">
          <!-- {{questionInfo.questionTypeName}} -->
          {{questionInfo.bigType==9?'阅读理解':(questionInfo.bigType==10?'材料演示题':(questionInfo.type==1?'单选题':(questionInfo.type==2?'多选题':(questionInfo.type==3?"问答题":(questionInfo.type==4?"判断题":(questionInfo.type==5?"填空题":(questionInfo.type==11?"完型填空题":'')))))))}}
        </div>
        <div v-show="questionInfo.status!=-1">
          <!-- 视频题 -->
          <div
            class="c-fs28 c-fc-xblack c-ph24 c-pb24"
            v-if="(questionInfo.resourceType == 1||questionInfo.resourceType == 2)&&
              questionInfo.resourceUrl != ''"
          >
            欣赏下面片段作答 。
          </div>
          <section
            v-show="
              questionInfo.resourceType == 1 &&
                questionInfo.resourceUrl != ''
            "
            class="c-hh360 c-ph24 c-p"
          >
            <div id="liveVideoIntroParent" class="c-w100-im"></div>
            <div
              v-show="!playing"
              class="c-pa  c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-mh24 c-pz100 c-bg-black c-pz100"
              @click="Videoplay"
            >
              <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
            </div>
            <div
              class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz100"
              v-if="questionInfo.assetStatus == -1"
            >
              <div class="c-br8 c-translucent-balck60 c-w100 c-h">
                <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">
                  &#xe963;
                </div>
                <div class="c-fs24 c-fc-f2 c-textAlign-c">
                  该视频已被管理员删除，如有疑问请咨询客服
                </div>
              </div>
            </div>
          </section>
          <!-- 音频题 -->
          <section
            v-show="questionInfo.resourceType == 2 &&questionInfo.resourceUrl != ''" class="c-ph24">
            <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
              <div class="c-mr30 c-ww54">
                <img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""/>
              </div>
              <div class="c-flex-grow1 c-mr48">
                <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">
                  {{ questionInfo.resourceName }}
                </div>
                <vue-slider
                  class="audioPlay"
                  :height="2"
                  :processStyle="processStyle"
                  :railStyle="railStyle"
                  :dotOptions="dotOptions"
                  v-model="audioPlayTime"
                  tooltip="none"
                  :lazy="true"
                  :max="duration"
                  @drag-start="dragStart"
                  @dragging="dragging"
                  @drag-end="dragEnddragEnd"
                  @change="inputChange"
                >
                  <template slot="dot">
                    <div class="dot-peinner c-ww22 c-hh22 c-brp50">
                      <span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"
                      ></span>
                    </div>
                  </template>
                </vue-slider>
                <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
                  <div>{{ playtime }}</div>
                  <div>{{ playtotalTime }}</div>
                </div>
              </div>
              <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white"
                v-if="showFirstSpeak"
                @click="firstPlay"
              >&#xe8ed;</div>
              <div
                class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white"
                v-if="!showLoudspeaker && !showFirstSpeak"
                @click="replay"
              >&#xe8ed;</div>
              <div
                class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white"
                v-if="showLoudspeaker && !showFirstSpeak"
                @click="pause"
              >&#xe8ef;</div>
              <div
                v-if="questionInfo.assetStatus == -1"
                class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz10 c-p-l0 c-w100 c-h"
              >
                <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
                <div class="c-fs24 c-fc-f2 c-ml16">
                  该音频已被管理员删除，如有疑问请咨询客服
                </div>
              </div>
            </div>
          </section>
          <div v-if="questionInfo.bigType==9">
            <div class="c-ph24 c-pb40 c-fs28 c-pt28">
              <span class="fl c-lh36">{{curNum}}.</span>
              <span class="c-fs28 c-lh36 c-fc-xblack copyNot problemdDom" @click="clickDesc" v-html="questionInfo.bigProblem"></span>
            </div>
            <div class="c-ph24">
              <div class="c-br8 bd-e6 bg-fa c-pb40">
                <div class="c-ph24 c-pb32 c-fs28 c-pt28">
                  <div class="c-ws-n c-mb20">{{questionInfo.type==1?'单选题':(questionInfo.type==2?'多选题':(questionInfo.type==3?"问答题":(questionInfo.type==4?"判断题":(questionInfo.type==5?"填空题":""))))}}</div>
                  <span class="c-fs28 c-l40 c-fc-xblack copyNot problemdDom" @click="clickDesc" v-html="questionInfo.problem"></span>
                </div>
                <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
                  <div v-for="(item,index) in optionsList" :key="index" class="c-flex-row c-pv20 c-fs28 c-ph32">
                    <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="item.isSelected == 0 ? 'c-bg-mgray':item.isSelected == 1 ? 'c-bg-reword c-fc-white':'c-bg-blue c-fc-white'">
                      {{item.type}}
                    </div>
                    <div class="c-pl20 c-lh50 copyNot problemdDom" v-html="item.name"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="c-pb60 c-fs28 c-pt28 c-ph32" v-if="questionInfo.type != 9">
              <span class="fl c-lh36">{{curNum}}.</span>
              <span class="c-fs28 c-lh36 c-fc-xblack copyNot problemdDom" v-html="questionInfo.problem"></span>
            </div>
            <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
              <div v-for="(item,index) in optionsList" :key="index" class="c-flex-row c-pv20 c-fs28 c-ph32">
                <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="item.isSelected == 0 ? 'c-bg-mgray':item.isSelected == 1 ? 'c-bg-reword c-fc-white':'c-bg-blue c-fc-white'">
                  {{item.type}}
                </div>
                <div class="c-pl20 c-lh50 copyNot problemdDom" v-html="item.name"></div>
              </div>
            </div>
          </div>

          <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4 || (questionInfo.type==9 && (questionInfo.realType==1 || questionInfo.realType==2 || questionInfo.realType==4))" class="c-fs28 c-ph32 c-pt40">
            <span>参考答案：</span>
            <span class="c-pl30">{{(questionInfo.type==4||(questionInfo.type==9 && questionInfo.realType==4))?(questionInfo.answer==1?'正确':'错误'):questionInfo.answer}}</span>
            <span class="c-pl60">你的答案：</span>
            <span class="c-pl30 c-fc-sorange">{{userAnswerTxt==""?"未答题":userAnswerTxt}}</span>
          </div>
          <div class="c-ph24 c-mt44" v-if="questionInfo.type==3 || (questionInfo.type==9 && questionInfo.realType==3)">
            <div class="c-fs28 c-fc-1b c-fw-b">您的答案：</div>
            <div class="c-fs24 c-fc-xblack c-mt14 c-ph20 c-pv16 c-br6 c-bd1-mgray copyNot" v-if="(questionInfo.userAnswer != '' && questionInfo.userAnswer != null) || imgArr.length == 0">{{questionInfo.userAnswer=='' || questionInfo.userAnswer==null ? '无' : questionInfo.userAnswer}}</div>
            <div class="c-pt30 c-flexw-wrap c-flex-row" v-if="imgArr.length > 0">
              <div v-for="(item,index) in imgArr" :key="index" class="c-ww160 c-hh160 c-mb30 c-flex-row c-flex-center c-p " :class="index % 3 == 0 ? '':'c-ml20'">
                <img @click="clickPreviewImage(item)" class="c-ww160 c-hh160" :src="$addXossFilter(item)" alt="" />
              </div>
            </div>
            <div class="c-flex-row c-flexw-wrap c-pt30" v-if="uploadAudioList.length > 0">
              <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in uploadAudioList" :key="index" :class="index % 3 == 0 ? '' : 'c-ml20'" class="c-ww160 c-hh60 c-br30 c-bg-ssmblue c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb30">
                <div class="box c-ww32">
                  <div class="wifi-symbol">
                    <div class="wifi-circle first c-bd2-white"></div>
                    <div class="wifi-circle second c-bd2-white" :class="playAduioSrc == item.url?'seconAnimation':''"></div>
                    <div class="wifi-circle third c-bd2-white" :class="playAduioSrc == item.url?'thirdAnimation':''"></div>
                  </div>
                </div>
                <div class="c-fs20 c-fc-white">{{item.time}}"</div>
              </div>
            </div>
          </div>
          <div class="c-ph24 c-mt44" v-if="questionInfo.type==5 || (questionInfo.type==9 && questionInfo.realType==5)">
            <div class="c-fs28 c-fc-1b c-fw-b">您的答案：</div>
            <section v-if="hasAnswer">
              <div class="c-flex-row c-mt24 c-aligni-center" v-for="(item,index) in questionInfo.userAnswer" :key="index">
                <div class="c-fs24 c-fc-xblack c-mr24 c-ww40 c-hh40 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
                <div class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10" :class="fbAnswerStyle[index] == 'right' ? 'rightClass' : fbAnswerStyle[index] == 'wrong' ? 'c-fc-reword' : ''">{{item.value.trim() == ''?'未答题':item.value}}</div>
              </div>
            </section>
            <div v-else class="c-fs24 c-fc-xblack c-mt24">未答题</div>
          </div>
          <!-- <div class="c-ph24 c-mt44" v-if="questionInfo.type==3 || (questionInfo.type==9 && questionInfo.realType==3)">
            <div class="c-fs28 c-fc-1b c-fw-b">老师点评：</div>
            <div class="tiny-style tinymce-text c-fs24 c-fc-xblack c-mt14 c-text-indent50 c-ph10 copyNot problemdDom" v-html="(questionInfo.remark==null||questionInfo.remark=='')?'无':questionInfo.remark"></div>
          </div> -->
          <div class="c-ph24 c-mt44" v-if="questionInfo.type==3 || (questionInfo.type==9 && questionInfo.realType==3)">
            <div class="c-fs28 c-fc-1b c-fw-b">参考答案：</div>
            <div class="tiny-style tinymce-text c-mt14 c-text-indent50 c-ww-bw c-contexty-scroll c-ph10 copyNot problemdDom" v-html="questionInfo.answer"></div>
          </div>
          <div class="c-ph24 c-mt44" v-if="questionInfo.type==5 || (questionInfo.type==9 && questionInfo.realType==5)">
            <div class="c-fs28 c-fc-1b c-fw-b">参考答案：</div>
            <div class="c-flex-row c-mt24 c-aligni-center" v-for="(item,index) in questionInfo.answer" :key="index">
              <div class="c-fs24 c-fc-xblack c-mr24 c-ww40 c-hh40 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
              <div class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10">{{item.value.trim() == ''?'未答题':item.value}}</div>
            </div>
          </div>
          <div class="c-ph24 c-mt20" v-if="questionInfo.type==11">
            <div class="c-flex-row c-justify-sb">
              <div class="c-fs26 c-fc-1b">学员答案：</div>
            </div>
            <section>
              <span v-for="(item,index) in questionInfo.userAnswer" :key="index" :class="questionInfo.answer[index]&&item.value==questionInfo.answer[index].value ? 'c-fc-mblue' : 'c-fc-reword'" class="c-fs24 c-mr10 copyNot c-fs26 c-fw-b">
                {{item.value == ''?'未答题':item.value}}{{questionInfo.userAnswer.length-1==index?'':","}}
              </span>
            </section>
          </div>
          <div class="c-ph24 c-mt44" v-if="questionInfo.type==11">
            <div class="c-fs26 c-fc-1b">正确答案：</div>
            <span v-for="(item,index) in questionInfo.answer" :key="index" class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10">
              {{item.value.trim() == ''?'未答题':item.value}}{{questionInfo.answer.length-1==index?'':","}}
            </span>
          </div>
          <div class="c-ph24">
            <div class="c-fs28 c-fw-b c-pt48">解析：</div>
            <div v-if="questionInfo.analysis != '' && questionInfo.analysis != ' '" class="tiny-style c-pt12 tinymce-text c-ww-bw c-contexty-scroll c-ph10 copyNot problemdDom" v-html="questionInfo.analysis"></div>
            <div v-if="(questionInfo.analysis == '' || questionInfo.analysis == ' ')&&(questionInfo.analysisRurl==''||!questionInfo.analysisRurl)" class="tiny-style c-pt12 c-pb100 tinymce-text c-ww-bw c-contexty-scroll c-ph10">无</div>
            <!-- 视频解析 -->
            <section v-show="questionInfo.analysisRtype==1&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-hh360 c-p c-mt14">
              <div id="ancyVideoIntroParent" class="c-w100-im"></div>
              <div v-show="!ancyPlaying" class="c-pa c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-pz100 c-bg-black" @click="VideoplayAncy">
                <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
              </div>
              <div class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz100" v-if="questionInfo.analysisAssetStatus==-1">
                <div class="c-br8 c-translucent-balck60 c-w100 c-h">
                  <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">&#xe963;</div>
                  <div class="c-fs24 c-fc-f2 c-textAlign-c">该视频已被管理员删除，如有疑问请咨询客服</div>
                </div>
              </div>
            </section>
            <!-- 音频解析 -->
            <section v-show="questionInfo.analysisRtype==2&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-mt14">
              <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
                <div class="c-mr30 c-ww54"><img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""></div>
                <div class="c-flex-grow1 c-mr48">
                  <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">{{questionInfo.analysisRname}}</div>
                  <vue-slider class="audioPlay" :height="2" :processStyle="processStyle" :railStyle="railStyle" :dotOptions="dotOptions" v-model="ancyaudioPlayTime" tooltip="none" :lazy="true" :max="ancyduration"
                    @drag-start="ancydragStart" @dragging="ancydragging" @drag-end="ancydragEnddragEnd" @change="ancyinputChange">
                    <template slot="dot">
                      <div class="dot-inner c-ww22 c-hh22 c-brp50"><span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></span></div>
                    </template>
                  </vue-slider>
                  <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
                    <div>{{ancyplaytime}}</div>
                    <div>{{ancyplaytotalTime}}</div>
                  </div>
                </div>
                <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowFirstSpeak" @click="ancyfirstPlay">&#xe8ed;</div>
                <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="!ancyshowLoudspeaker&&!ancyshowFirstSpeak" @click="ancyreplay">&#xe8ed;</div>
                <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowLoudspeaker && !ancyshowFirstSpeak" @click="ancypause">&#xe8ef;</div>
                <div v-if="questionInfo.analysisAssetStatus==-1" class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz6 c-p-l0 c-w100 c-h">
                  <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
                  <div class="c-fs24 c-fc-f2 c-ml16">该音频已被管理员删除，如有疑问请咨询客服</div>
                </div>
              </div>
            </section>
          </div>
        </div>
        <div v-show="questionInfo.status==-1">
          <loading-status-tem :showLoading="false" :noData="questionInfo.status==-1" :noDataText="'该题目已被删除,请联系管理员'"></loading-status-tem>
        </div>
      </section>
    </div>
    <div class="c-flex-row c-hh80 c-aligni-center c-bd-t1 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz100">
      <div class="c-flex-row c-flex-center c-ww80 c-bd-r1">
        <span v-if="removeStatus == 0" class="c-fs26 iconfont" @click="removeWrong">&#xe8d6;</span>
      </div>
      <div class="c-flex-grow1 c-w0 c-bd-r1 c-textAlign-c c-fs28" :class="isBegin ? 'c-fc-gray' : ''" @click="clickPrev">上一题</div>
      <div class="c-flex-grow1 c-w0 c-textAlign-c c-fs28" :class="isOver ? 'c-fc-gray':''" @click="clickNext">下一题</div>
    </div>
    <cj-popup v-model="showSelectModal" :closeable="true" titleClass="c-bd-b1" :title="'第'+(selectIndex*1+1)+'空'" position="bottom" round v-if="questionInfo&& questionInfo.newOption">
      <div v-for="(item,index) in questionInfo.newOption[selectIndex].options" :key="index" class="c-flex-row c-pv20 c-fs28 c-ph32">
        <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="item.isSelected == 0 ? 'c-bg-mgray':item.isSelected == 1 ? 'c-bg-reword c-fc-white':item.isSelected == 2 ?'c-bg-send-green c-fc-white':'c-bg-mgray'">
          {{item.name}}
        </div>
        <div class="c-pl20 c-lh50 copyNot problemdDom" @click="clickDesc" v-html="item.content"></div>
      </div>
    </cj-popup>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
import { utilJs, wxUtilJs } from "@/utils/common.js"
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";
let ancyPlayer = null;
let playTimeControl = null;
let ancyplayTimeControl = null;
let ancyisCanPlay = false
let player = null;
let isCanPlay = false
export default {
  name: "ItemWrongAnswerAnalyze",
  components: {
    loadingStatusTem,
    VueSlider
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      // questionType: 1, //1:查看错题集 2:查看重答错题集里的题目的结果 3:查看重答错题集里的题目的错题
      paperMainId: -1,
      // topicId: -1,
      // paperId:'',
      questionInfo: null,
      allQuestion: null,
      optionsList: [],
      isBegin: true,
      isOver: false,
      num: 1,
      allNumber: -1,
      wrongNumber: -1,
      userAnswerTxt: '',
      isLookError: false,
      prevWrong: 0,
      nextWrong: 0,
      imgArr: [],
      hasAnswer: false,
      smallNumber: 1,
      hasSmallNum: 0,
      curNum: 1,
      removeStatus: 0, // 1:移除
      ancyshowFirstSpeak: true,
      ancyshowLoudspeaker: false,
      ancydragFlag: false, //进度拖拽
      ancyaudioPlayTime:0,
      ancyplaytime: '00:00:00',
      ancyplaytotalTime: '00:00:00',
      ancyduration:0,
      ancyPlaying:false,
      audioPlayTime: 0,
      playtime: '00:00:00',
      playtotalTime: '00:00:00',
      duration: 0,
      showFirstSpeak: true,
      showLoudspeaker: false,
      dragFlag: false, //进度拖拽
      playing: false,
      processStyle: {
        "background-color": "#fff"
      },
      railStyle: {
        "background": "rgba(255,255,255,0.3)"
      },
      dotOptions: {
        style: {
          border: "1px solid #fff",
        },
      }, //进度条组件样式
      fbAnswerStyle:[],
      rId:'',
      uploadAudioList:[],
      selectIndex:0, // 获取其属性
      showSelectModal:false
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("查看题目");// eslint-disable-line
    // this.examMainId = this.$route.query.examMainId;
    // this.topicId = this.$route.query.topicId;
    // this.paperId = this.$route.query.paperId
    // this.questionType = this.topicId || this.$route.query.allcheck ? 1 : 2;
    this.rId = this.$route.query.rId
    this.wrongNumber = -1;
    this.allNumber = -1;
    this.num = 1;
    this.isLookError = false;
    this.prevWrong = 0;
    this.nextWrong = 0;
    this.imgArr = [];
    this.playAduioSrc = ''
    this.hasAnswer = false;
    this.smallNumber = 1;
    this.hasSmallNum = 0;
    this.curNum = 1;
    this.allQuestion = null;
    this.removeStatus = 0;
    this.uploadAudioList = []
    this.ancyshowFirstSpeak = true
    this.ancyshowLoudspeaker = false
    this.ancyaudioPlayTime = 0
    this.selectIndex = 0, // 获取其属性
      this.showSelectModal = false
    this.getQuestion();
    this.wechatShare();
  },
  deactivated() {
    if (player) {
      destoryPlayer(player);
      player = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
    if (ancyPlayer) {
      destoryPlayer(ancyPlayer);
      ancyPlayer = null;
    }
  },
  mounted() {
    this.ancyshowFirstSpeak = true
    this.ancyshowLoudspeaker = false
    this.ancyaudioPlayTime = 0
  },
  methods: {
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audioSelf");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audioSelf").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      if (this.playAduioSrc && this.playAduioSrc.includes("https")) {
        document.getElementById("audioSelf").src = this.playAduioSrc;
        audio.play();
      }
    },

    //监听音频播放结束执行的内容
    playAudioSelfEnd() {
      this.playAduioSrc = "";
      document.getElementById("audioSelf").src = this.playAduioSrc;
    },
    removeWrong() {
      let $this = this;
      this.$cjConfirm({
        message: '确定从错题集中删除该题',
        onConfirm:() => {
          this.$loading.show({
            text: "删除中..."
          });
          let urlT = global.apiurl + 'itemBank/removeErrorProblem'
          utilJs.postMethod(urlT, {questionId:this.questionInfo.questionId}, function (res) {
              $this.allQuestion.splice($this.curNum - 1, 1);
              $this.allNumber = $this.allQuestion.length;
              if ($this.allQuestion.length == 0) {
                $this.$loading.hide();
                $this.$router.go(-1);
              } else if ($this.curNum == $this.allQuestion.length + 1) {
                $this.curNum--
              }
              $this.opInfo();
              $this.$loading.hide();
              // $this.removeStatus = 1;
          },
            failRes => {
              $this.$loading.hide();
            }
          );
        }
      })
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
    initQPlayer() {
      let videoObj = {
        videoMp4: this.questionInfo.resourceUrl,
        videoM3U8: this.questionInfo.resourceUrl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../../public/i/wap/index/poster.png")
      };
      player = getXgplayer("liveVideoIntroParent", videoObj);
      player.on('ready', () => {
        if (document.querySelector(".xgplayer-start")) {
          document.querySelector(".xgplayer-start").style.zIndex = 99;
        }
      })
      player.on("play", () => {
        if (ancyPlayer) {
          ancyPlayer.pause();
        }
        if (document.getElementById("ancyaudio").src != '') {
          this.ancyshowFirstSpeak = true
          document.getElementById('ancyaudio').pause();
        }
      });
      if (document.querySelector(".xgplayer-start")) {
        document.querySelector(".xgplayer-start").style.zIndex = '99';
      }
    },
    initQPlayerAncy() {
      let videoObj = {
        videoMp4: this.questionInfo.analysisRurl,
        videoM3U8: this.questionInfo.analysisRurl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../../public/i/wap/index/poster.png")
      };
      ancyPlayer = getXgplayer("ancyVideoIntroParent", videoObj);
      ancyPlayer.on('ready', () => {
        if (document.querySelector(".xgplayer-start")) {
          document.querySelector(".xgplayer-start").style.zIndex = 99;
        }
      })
      if (document.querySelector(".xgplayer-start")) {
        document.querySelector(".xgplayer-start").style.zIndex = '99';
      }
      ancyPlayer.on("play", () => {
        if (player) {
          player.pause();
        }
        if (document.getElementById("audio").src != '') {
          document.getElementById('audio').pause();
          this.showFirstSpeak = true
        }
      });
    },
    Videoplay() {
      if (this.questionInfo.resourceUrl) {
        player.play()
        this.playing = true
      }
    },
    VideoplayAncy() {
      if (this.questionInfo.analysisRurl) {
        ancyPlayer.play()
        this.ancyPlaying = true
      }
    },
    getQuestion() {
      let $this = this;
      let urlT = '';
      // let ckFrom = this.topicId ? 1 : 2
      let prodId = this.rId
        urlT = global.apiurl + "itemBank/myErrorProblem/" + prodId; //查看题目
      this.showFirstSpeak = true;
      this.ancyshowFirstSpeak = true
      this.showLoudspeaker = false;
      this.ancyshowLoudspeaker = false;
      this.audioPlayTime = 0;
      this.ancyaudioPlayTime = 0;
      this.playtime = '00:00:00';
      this.playtotalTime = '00:00:00';
      this.ancyplaytime = '00:00:00';
      this.ancyplaytotalTime = '00:00:00';
      this.duration = 0;
      this.ancyduration = 0;
      this.playing = false
      this.ancyPlaying = false
      this.fbAnswerStyle = []
      clearInterval(playTimeControl);
      clearInterval(ancyplayTimeControl);
      clearInterval(ancyplayTimeControl);
      utilJs.getMethod(urlT, function (res) {
        $this.allQuestion = res;
        if ($this.allQuestion.length > 0) {
          $this.opInfo();
        }
      });
    },
    opInfo() {
      let $this = this
      this.optionsList = [];
      this.imgArr = [];
      this.questionInfo = null;
      this.hasAnswer = false;
      this.removeStatus = 0;
      this.allNumber = this.allQuestion.length;
      this.questionInfo = JSON.parse(JSON.stringify(this.allQuestion[this.curNum - 1]));
      this.uploadAudioList = this.questionInfo.audioArr || []
      this.playAduioSrc = ''
      this.selectIndex = 0, // 获取其属性
      this.showSelectModal = false
      if (!document.getElementById('audio').ended) {
        document.getElementById("audio").pause();
      }
      if (!document.getElementById('ancyaudio').ended) {
        document.getElementById("ancyaudio").pause();
      }
      if (player) {
          destoryPlayer(player);
          player = null;
          // document.querySelector("#liveVideoIntroParent").innerHTML = "";
        }
        if (ancyPlayer) {
          destoryPlayer(ancyPlayer);
          ancyPlayer = null;
          // document.querySelector("#liveVideoIntroParent").innerHTML = "";
        }
        if ($this.questionInfo.status == 1 && $this.questionInfo.resourceUrl != '' && $this.questionInfo.resourceType == 1) {
          $this.$nextTick(function () {
            $this.initQPlayer();
          })
        }
        if ($this.questionInfo.status == 1 && $this.questionInfo.analysisRurl && $this.questionInfo.analysisRurl != '' && $this.questionInfo.analysisRtype == 1) {
          $this.$nextTick(function () {
            $this.initQPlayerAncy();
          })
        }
        let audio = document.getElementById("audio");
        audio.src = '';
        if ($this.questionInfo.resourceUrl != '' && $this.questionInfo.resourceType == 2) {
          // $this.$nextTick(function () {
          audio.src = $this.questionInfo.resourceUrl;
          document.getElementById('audio').removeEventListener('timeupdate', $this.audioTimeUpdate);
          document.getElementById('audio').removeEventListener('canplay', $this.audioCanPlay);
          document.getElementById('audio').addEventListener('timeupdate', $this.audioTimeUpdate);
          document.getElementById('audio').addEventListener('canplay', $this.audioCanPlay);
          // })
        }
        let ancyaudio = document.getElementById("ancyaudio");
        ancyaudio.src = '';
        if ($this.questionInfo.analysisRurl != '' && $this.questionInfo.analysisRtype == 2) {
          // $this.$nextTick(function () {
          ancyaudio.src = $this.questionInfo.analysisRurl;
          document.getElementById('ancyaudio').removeEventListener('timeupdate', $this.ancyAudioTimeUpdate);
          document.getElementById('ancyaudio').removeEventListener('canplay', $this.ancyAudioCanPlay);
          document.getElementById('ancyaudio').addEventListener('timeupdate', $this.ancyAudioTimeUpdate);
          document.getElementById('ancyaudio').addEventListener('canplay', $this.ancyAudioCanPlay);
          // })
        }
      // if (this.questionInfo.type == 9) {
      //   this.hasSmallNum = this.questionInfo.hasSmallNum;
      // }
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2 || (this.questionInfo.type == 9 && (this.questionInfo.realType == 1 || this.questionInfo.realType == 2))) {
        if (this.questionInfo.userAnswer == null || this.questionInfo.userAnswer == '') {
          this.userAnswerTxt = '';
        } else {
          this.userAnswerTxt = this.questionInfo.userAnswer;
        }
      } else if (this.questionInfo.type == 4 || (this.questionInfo.type == 9 && this.questionInfo.realType == 4)) {
        if (this.questionInfo.userAnswer == '1') {
          this.userAnswerTxt = '正确';
        } else if (this.questionInfo.userAnswer == '-1') {
          this.userAnswerTxt = '错误';
        } else {
          this.userAnswerTxt = '';
        }
      }
      if (this.questionInfo.type == 5 || (this.questionInfo.type == 9 && this.questionInfo.realType == 5)) {
        if (this.questionInfo.userAnswer) {
          for (let item of this.questionInfo.userAnswer) {
            if (item.value != '') {
              this.hasAnswer = true;
            }
          }
        }
      }
      if (this.questionInfo.type == 4 || (this.questionInfo.type == 9 && this.questionInfo.realType == 4)) {
        this.questionInfo.optionA = "正确";
        this.questionInfo.optionB = "错误";
      }
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2 || this.questionInfo.type == 11 || this.questionInfo.type == 4 || (this.questionInfo.type == 9 && (this.questionInfo.realType == 1 || this.questionInfo.realType == 2 || this.questionInfo.realType == 4))) {
        const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
        for (let i = 0; i < 10; i++) {
          let optionSty = `option${optionArr[i]}`;
          if (this.questionInfo[optionSty] != '' && this.questionInfo[optionSty] != null) {
            this.optionsList.push({ type: optionArr[i], name: this.questionInfo[optionSty], isSelected: 0 });
          }
        }
      }
      if ($this.questionInfo.type == 11) {
          let str = $this.questionInfo.problem;
          // match 方法返回匹配的数组
          let res = str.match(/\{\{[\d}]*?\}\}/g);
          let count = !res ? 0 : res.length;
          if ($this.questionInfo.userAnswer == null || $this.questionInfo.userAnswer == '' || ($this.questionInfo.userAnswer.length == 1 && $this.questionInfo.userAnswer[0].value == '')) {
            $this.questionInfo.userAnswer = []
            for (let k = 0; k < count; k++) {
              $this.questionInfo.userAnswer[k] = {value : "", key : ""}
            }
          }
          for (let i = 0; i < count; i++) {
            $this.questionInfo.problem = $this.questionInfo.problem.replace(/\{\{[\d}]*?\}\}/, function() {
              let match = '<span name=' + count + ' class="c-lh36 c-mh10 c-ww160 c-inlineblack c-bd0 c-br0 c-fc-mblue c-textAlign-c c-ph10 c-p c-bg-white" style="text-align-last: center;font-size: 0.7rem;border-bottom:1px solid">'
              if ($this.questionInfo.userAnswer[i] && $this.questionInfo.userAnswer[i].value != '') {
                match += "<span class='c-textAlign-c selectClass' selected='selected' value=" + i + ">" + $this.questionInfo.userAnswer[i].value + "</span>"
              } else {
                match += "<span class='c-textAlign-c selectClass' value=" + i + ">未答题</span>"
              }
              match += '</span>'
              return match
            })
            console.log(11111111111)
            $this.$nextTick(function () {
              $this.bineSelect();
            })
          }
        }
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2 || (this.questionInfo.type == 9 && (this.questionInfo.realType == 1 || this.questionInfo.realType == 2))) {
        if (this.questionInfo.userAnswer != null) {
          for (let i = 0; i < this.questionInfo.userAnswer.length; i++) {
            if (this.questionInfo.userAnswer[i] == 'A') {
              this.optionsList[0].isSelected = 1;
              this.optionsList[0].type = 'A';
            }
            if (this.questionInfo.userAnswer[i] == 'B') {
              this.optionsList[1].isSelected = 1;
              this.optionsList[1].type = 'B';
            }
            if (this.questionInfo.userAnswer[i] == 'C') {
              this.optionsList[2].isSelected = 1;
              this.optionsList[2].type = 'C';
            }
            if (this.questionInfo.userAnswer[i] == 'D') {
              this.optionsList[3].isSelected = 1;
              this.optionsList[3].type = 'D';
            }
            if (this.questionInfo.userAnswer[i] == 'E') {
              this.optionsList[4].isSelected = 1;
              this.optionsList[4].type = 'E';
            }
            if (this.questionInfo.userAnswer[i] == 'F') {
              this.optionsList[5].isSelected = 1;
              this.optionsList[5].type = 'F';
            }
            if (this.questionInfo.userAnswer[i] == 'G') {
              this.optionsList[6].isSelected = 1;
              this.optionsList[6].type = 'G';
            }
            if (this.questionInfo.userAnswer[i] == 'H') {
              this.optionsList[7].isSelected = 1;
              this.optionsList[7].type = 'H';
            }
            if (this.questionInfo.userAnswer[i] == 'I') {
              this.optionsList[8].isSelected = 1;
              this.optionsList[8].type = 'I';
            }
            if (this.questionInfo.userAnswer[i] == 'J') {
              this.optionsList[9].isSelected = 1;
              this.optionsList[9].type = 'J';
            }
          }
        }
        for (let i = 0; i < this.questionInfo.answer.length; i++) {
          if (this.questionInfo.answer[i] == 'A') {
            this.optionsList[0].isSelected = 2;
            this.optionsList[0].type = 'A';
          }
          if (this.questionInfo.answer[i] == 'B') {
            this.optionsList[1].isSelected = 2;
            this.optionsList[1].type = 'B';
          }
          if (this.questionInfo.answer[i] == 'C') {
            this.optionsList[2].isSelected = 2;
            this.optionsList[2].type = 'C';
          }
          if (this.questionInfo.answer[i] == 'D') {
            this.optionsList[3].isSelected = 2;
            this.optionsList[3].type = 'D';
          }
          if (this.questionInfo.answer[i] == 'E') {
            this.optionsList[4].isSelected = 2;
            this.optionsList[4].type = 'E';
          }
          if (this.questionInfo.answer[i] == 'F') {
            this.optionsList[5].isSelected = 2;
            this.optionsList[5].type = 'F';
          }
          if (this.questionInfo.answer[i] == 'G') {
            this.optionsList[6].isSelected = 2;
            this.optionsList[6].type = 'G';
          }
          if (this.questionInfo.answer[i] == 'H') {
            this.optionsList[7].isSelected = 2;
            this.optionsList[7].type = 'H';
          }
          if (this.questionInfo.answer[i] == 'I') {
            this.optionsList[8].isSelected = 2;
            this.optionsList[8].type = 'I';
          }
          if (this.questionInfo.answer[i] == 'J') {
            this.optionsList[9].isSelected = 2;
            this.optionsList[9].type = 'J';
          }
        }
      } else if (this.questionInfo.type == 4 || (this.questionInfo.type == 9 && this.questionInfo.realType == 4)) {
        if (this.questionInfo.userAnswer != null) {
          if (this.questionInfo.userAnswer == '1') {
            this.optionsList[0].isSelected = 1;
            this.optionsList[0].type = 'A';
          } else if (this.questionInfo.userAnswer == '-1') {
            this.optionsList[1].isSelected = 1;
            this.optionsList[1].type = 'B';
          }
        }
        if (this.questionInfo.answer == '1') {
          this.optionsList[0].isSelected = 2;
          this.optionsList[0].type = 'A';
        } else if (this.questionInfo.answer == '-1') {
          this.optionsList[1].isSelected = 2;
          this.optionsList[1].type = 'B';
        }
      } else if ((this.questionInfo.type == 5 || this.questionInfo.realType == 5) && this.questionInfo.userAnswer) {
          let fbRightAnswer = JSON.parse(JSON.stringify(this.questionInfo.answer));
          let hasRightAnswer = false;
          for (let i = 0; i < this.questionInfo.userAnswer.length; i++) {
            if (this.questionInfo.enableDisorderMatch == 1) {//是否是乱序模式
              for (let j = 0; j < fbRightAnswer.length; j++) {
                let answerTextArr = []
                if (fbRightAnswer[j].value.indexOf(";") > -1) {
                  answerTextArr = fbRightAnswer[j].value.split(";")
                } else {
                  answerTextArr.push(fbRightAnswer[j].value)
                }
                for (let k = 0; k < answerTextArr.length; k++) {
                  if (this.questionInfo.userAnswer[i].value.trim() == answerTextArr[k].trim()) {
                    hasRightAnswer = true;
                    fbRightAnswer.splice(j, 1);
                    break;
                  }
                }
              }
            } else {
              let answerTextArr = []
              if (fbRightAnswer[i].value.indexOf(";") > -1) {
                answerTextArr = fbRightAnswer[i].value.split(";")
              } else {
                answerTextArr.push(fbRightAnswer[i].value)
              }
              for (let k = 0; k < answerTextArr.length; k++) {
                if (this.questionInfo.userAnswer[i].value.trim() == answerTextArr[k].trim()) {
                  hasRightAnswer = true;
                  break;
                }
              }
            }
            if (hasRightAnswer) {
              this.$set(this.fbAnswerStyle, i, 'right');
            } else {
              this.$set(this.fbAnswerStyle, i, 'wrong');
            }
            hasRightAnswer = false;
          }
        }
      if (this.questionInfo.type == 3 || (this.questionInfo.type == 9 && this.questionInfo.realType == 3)) {
        if (this.questionInfo.imgArr && this.questionInfo.imgArr.length > 0) {
          for (let item of this.questionInfo.imgArr) {
            this.imgArr.push(item.url);
          }
        }
      }
      // if (this.questionInfo.type == 9) {
      //   this.isOver = (this.num < this.allNumber || this.smallNumber < this.hasSmallNum) ? false : true;
      //   this.isBegin = this.num == 1 && this.smallNumber == 1 ? true : false;
      // } else {
        this.isOver = this.curNum < this.allNumber ? false : true;
        this.isBegin = this.curNum == 1 ? true : false;
      // }
    },
    bineSelect() {
      let btn = document.getElementsByClassName('selectClass')
      Array.from(btn).forEach(element => {
        element.addEventListener('click', this.getSelect);
      });
      console.log(22222)
    },
    getSelect(event) {
      var currentTarget = event.currentTarget; // 指向添加监听器的元素
      this.selectIndex = currentTarget.getAttribute('value'); // 获取其属性
      if (this.questionInfo.userAnswer) {
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'A') {
            this.questionInfo.newOption[this.selectIndex].options[0].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[0].name = 'A';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'B') {
            this.questionInfo.newOption[this.selectIndex].options[1].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[1].name = 'B';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'C') {
            this.questionInfo.newOption[this.selectIndex].options[2].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[2].name = 'C';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'D') {
             this.questionInfo.newOption[this.selectIndex].options[3].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[3].name = 'D';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'E') {
             this.questionInfo.newOption[this.selectIndex].options[4].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[4].name = 'E';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'F') {
             this.questionInfo.newOption[this.selectIndex].options[5].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[5].name = 'F';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'G') {
             this.questionInfo.newOption[this.selectIndex].options[6].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[6].name = 'G';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'H') {
             this.questionInfo.newOption[this.selectIndex].options[7].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[7].name = 'H';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'I') {
             this.questionInfo.newOption[this.selectIndex].options[8].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[8].name = 'I';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'J') {
             this.questionInfo.newOption[this.selectIndex].options[9].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[9].name = 'J';
          }
      }
          if (this.questionInfo.answer[this.selectIndex].value == 'A') {
            this.questionInfo.newOption[this.selectIndex].options[0].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[0].name = 'A';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'B') {
            this.questionInfo.newOption[this.selectIndex].options[1].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[1].name = 'B';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'C') {
            this.questionInfo.newOption[this.selectIndex].options[2].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[2].name = 'C';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'D') {
            this.questionInfo.newOption[this.selectIndex].options[3].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[3].name = 'D';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'E') {
            this.questionInfo.newOption[this.selectIndex].options[4].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[4].name = 'E';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'F') {
           this.questionInfo.newOption[this.selectIndex].options[5].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[5].name = 'F';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'G') {
            this.questionInfo.newOption[this.selectIndex].options[6].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[6].name = 'G';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'H') {
            this.questionInfo.newOption[this.selectIndex].options[7].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[7].name = 'H';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'I') {
            this.questionInfo.newOption[this.selectIndex].options[8].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[8].name = 'I';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'J') {
            this.questionInfo.newOption[this.selectIndex].options[9].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[9].name = 'J';
          }
          console.log(this.selectIndex, this.questionInfo.answer[this.selectIndex].value, this.questionInfo.newOption)
      this.showSelectModal = true
    },
     //开始播放音频
    audioCanPlay(e) {
      isCanPlay = true;
      this.duration = Math.floor(e.target.duration);
      this.duration = Math.floor(document.getElementById('audio').duration)
      this.playtotalTime = this.timeToStr(this.duration)
      console.log("audioCanPlay-----------");
    },
          //开始播放音频
    ancyAudioCanPlay(e) {
      ancyisCanPlay = true;
      this.ancyduration = Math.floor(e.target.duration);
      this.ancyduration = Math.floor(document.getElementById('ancyaudio').duration)
      this.ancyplaytotalTime = this.timeToStr(this.ancyduration)
    },
    ancyAudioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.ancydragFlag && !ancyisCanPlay) {
        return;
      }
      ancyplayTimeControl = setTimeout(() => {
        if (document.getElementById('ancyaudio') && Math.floor(document.getElementById('ancyaudio').currentTime) > 0) {
          this.ancyaudioPlayTime = Math.floor(document.getElementById('ancyaudio').currentTime);
          this.ancyplaytime = this.timeToStr(this.ancyaudioPlayTime)
        }
      }, 200)
    },
    audioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.dragFlag && !isCanPlay) {
        return;
      }
      playTimeControl = setTimeout(() => {
        if (document.getElementById('audio') && Math.floor(document.getElementById('audio').currentTime) > 0) {
          this.audioPlayTime = Math.floor(document.getElementById('audio').currentTime);
          this.playtime = this.timeToStr(this.audioPlayTime)
        }
      }, 200)
      console.log("audioTimeUpdate-----------");
    },
    ancydragStart() {
      this.ancydragFlag = true;
    },
    dragStart() {
      this.dragFlag = true;
    },
    inputChange(value) {
      console.log("inputChange-----------");
      if (this.dragFlag) {
        this.dragFlag = false;
        return;
      }
      document.getElementById('audio').currentTime = this.audioPlayTime;
    },
    ancyinputChange(value) {
      console.log("inputChange-----------");
      if (this.ancydragFlag) {
        this.ancydragFlag = false;
        return;
      }
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
    },
    dragging() {
      this.dragFlag = true;
      clearInterval(playTimeControl);
      console.log("dragging------");
    },
    ancydragging() {
      this.ancydragFlag = true;
      clearInterval(ancyplayTimeControl);
      console.log("dragging------");
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    dragEnddragEnd() {
      document.getElementById('audio').currentTime = this.audioPlayTime;
      this.dragFlag = false;
      console.log("dragEnd-----------");
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    ancydragEnddragEnd() {
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
      this.ancydragFlag = false;
      console.log("dragEnd-----------");
    },
    firstPlay() {
      this.showFirstSpeak = false;
      this.showLoudspeaker = true;
      this.playRadio();
      if (ancyPlayer) {
        ancyPlayer.pause();
      }
      if (document.getElementById("ancyaudio").src != '') {
        document.getElementById('ancyaudio').pause();
        this.ancyshowFirstSpeak = true
      }
    },
    ancyfirstPlay() {
      this.ancyshowFirstSpeak = false;
      this.ancyshowLoudspeaker = true;
      this.ancyplayRadio();
      if (player) {
        player.pause();
      }
      if (document.getElementById("audio").src != '') {
        document.getElementById('audio').pause();
        this.showFirstSpeak = true
      }
    },
    replay() {
      this.audioPlayTime = 0
      document.getElementById('audio').currentTime = this.audioPlayTime;
      this.showLoudspeaker = true;
      this.playRadio();
      if (ancyPlayer) {
        ancyPlayer.pause();
      }
      if (document.getElementById("ancyaudio").src != '') {
        document.getElementById('ancyaudio').pause();
        this.ancyshowFirstSpeak = true
      }
    },
    ancyreplay() {
      this.ancyaudioPlayTime = 0
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
      this.ancyshowLoudspeaker = true;
      this.ancyplayRadio();
      if (player) {
        player.pause();
      }
      if (document.getElementById("audio").src != '') {
        document.getElementById('audio').pause();
        this.showFirstSpeak = true
      }
    },
    pause() {
      this.showFirstSpeak = true
      document.getElementById("audio").pause();
    },
    ancypause() {
      this.ancyshowFirstSpeak = true
      document.getElementById("ancyaudio").pause();
    },
    playRadio() {
      let audio = document.getElementById("audio");
      if (this.questionInfo.resourceType == 2 && this.questionInfo.resourceUrl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("audio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("audio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    ancyplayRadio() {
      let audio = document.getElementById("ancyaudio");
      if (this.questionInfo.analysisRtype == 2 && this.questionInfo.analysisRurl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("ancyaudio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("ancyaudio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    playAudioEnd() {
      this.showLoudspeaker = false;
    },
    ancyPlayAudioEnd() {
      this.ancyshowLoudspeaker = false;
    },
    onPlayTimeChange(playTime, allTime) {
      this.audioPlayTime = playTime;
    },
    ancyOnPlayTimeChange(playTime, allTime) {
      this.ancyaudioPlayTime = playTime;
    },
    playAudioError() {},
    ancyPlayAudioError() {},
    clickPrev() {
      if (this.isBegin) {
        return
      }
      this.showFirstSpeak = true;
      this.ancyshowFirstSpeak = true
      this.showLoudspeaker = false;
      this.ancyshowLoudspeaker = false;
      this.audioPlayTime = 0;
      this.ancyaudioPlayTime = 0;
      this.playtime = '00:00:00';
      this.playtotalTime = '00:00:00';
      this.ancyplaytime = '00:00:00';
      this.ancyplaytotalTime = '00:00:00';
      this.duration = 0;
      this.ancyduration = 0;
      this.playing = false
      this.ancyPlaying = false
      clearInterval(playTimeControl);
      clearInterval(ancyplayTimeControl);
      //点击上一题
      // if (this.questionInfo.type == 9) {
      //   if (this.num <= 1 && this.smallNumber <= 1) {
      //     // return;
      //   } else if (this.smallNumber > 1) {
      //     this.smallNumber--;
      //   } else if (this.num > 1 && this.smallNumber <= 1) {
      //     this.num--;
      //     this.smallNumber = 1;
      //   }
      // } else {
        if (this.curNum <= 1) {
          // if (this.removeStatus == 1) {
          //   this.allQuestion.splice(this.curNum - 1, 1);
          //   this.allNumber = this.allQuestion.length;
          //   this.curNum = 1;
          //   this.opInfo();
          // }
          return;
        }
        // if (this.removeStatus == 1) {
        //   this.allQuestion.splice(this.curNum - 1, 1);
        //   this.allNumber = this.allQuestion.length;
        // }
        this.curNum--;
        // this.smallNumber = 1;
      // }
      if (player) {
        player.pause()
        // this.ancyPlaying = false
      }
      if (ancyPlayer) {
        ancyPlayer.pause()
        // this.ancyPlaying = false
      }
      this.opInfo();
      // this.getQuestion();
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    clickNext() {
      //点击下一题
      if (this.isOver) {
        return
      }
      this.showFirstSpeak = true;
      this.ancyshowFirstSpeak = true
      this.showLoudspeaker = false;
      this.ancyshowLoudspeaker = false;
      this.audioPlayTime = 0;
      this.ancyaudioPlayTime = 0;
      this.playtime = '00:00:00';
      this.playtotalTime = '00:00:00';
      this.ancyplaytime = '00:00:00';
      this.ancyplaytotalTime = '00:00:00';
      this.duration = 0;
      this.ancyduration = 0;
      this.playing = false
      this.ancyPlaying = false
      clearInterval(playTimeControl);
      clearInterval(ancyplayTimeControl);
      // if (this.questionInfo.type == 9) {
      //   if (this.num >= this.allNumber && this.smallNumber >= this.hasSmallNum) {
      //     return;
      //   } else if (this.num < this.allNumber && this.smallNumber >= this.hasSmallNum) {
      //     this.num++;
      //     this.smallNumber = 1;
      //   } else if (this.smallNumber < this.hasSmallNum) {
      //     this.smallNumber++;
      //   }
      // } else {
        if (this.curNum >= this.allNumber) {
          // if (this.removeStatus == 1) {
          //   this.allQuestion.splice(this.curNum - 1, 1);
          //   this.allNumber = this.allQuestion.length;
          //   this.curNum --;
          //   this.opInfo();
          // }
          return;
        }
        // if (this.removeStatus == 1) {
        //   this.allQuestion.splice(this.curNum - 1, 1);
        //   this.allNumber = this.allQuestion.length;
        // } else {
        this.curNum++;
        this.smallNumber = 1;
        // }
      // }
      if (player) {
        player.pause()
        // this.ancyPlaying = false
      }
      if (ancyPlayer) {
        ancyPlayer.pause()
        // this.ancyPlaying = false
      }
      this.opInfo();
      // this.getQuestion();
    },
    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let $this = this;
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: $this.imgArr // 需要预览的图片http链接列表
      });
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  beforeRouteLeave(to, from, next) {
    if (ancyPlayer) {
      destoryPlayer(ancyPlayer);
      ancyPlayer = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
    if (player) {
      destoryPlayer(player);
      player = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
    next();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.op-type {
  flex-shrink: 0;
}
.tiny-style {
  font-size: 0.6rem !important;
  color: #333 !important;
}
.bd-e6 {
  border: 1px solid #e6e6e6;
}
.bg-fa {
  background-color: #fafafa;
}
#ancyVideoIntroParent {
  width: 100% !important;
}
#ancyVideoIntroParent /deep/ .xgplayer-start{
  z-index: 99;
}
.dot-inner {
  position: relative;
  background: rgba(255,255,255,1);
}
.c-whiteOpcity03 {
  background: rgba(255, 255, 255, 0.3);
}
.dot-peinner {
  position: relative;
  background: rgba(255, 255, 255, 1);
}
.audioPlay /deep/ .vue-slider-dot {
  width: auto !important;
  height: auto !important;
}
#liveVideoIntroParent {
  width: 100% !important;
}
.noChoose {
  border: 1px solid #e5e5e5;
}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.rightClass{
  color: #6c83ff;
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
</style>
